<template>
  <nav>
    <ul>
      <router-link to="/film" tag="li" active-class="currentnav">
        <van-icon name="video-o" />
        <span>电影</span>
      </router-link>
      <router-link to="/cinema" tag="li" active-class="currentnav">
        <van-icon name="shop-o" />
        <span>影院</span>
      </router-link>
      <router-link to="/center" tag="li" active-class="currentnav">
        <van-icon name="contact" />
        <span>我的</span>
      </router-link>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'TabBar'
}
</script>

<style scoped>
nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: .50rem;
  line-height: .25rem;
  text-align: center;
  background: #fff;
  border-top: 1px solid #ededed;
}
ul {
  display: flex;
}
ul li {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 3px;
  color: #797d82;
}
ul li span {
  font-size: .12rem;
}
.currentnav {
  color: #ff5f16;
}
.van-icon {
  font-size: .25rem;
}
</style>